<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>appointment registration</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
       body{
            background: rgb(248,248,248);
       }
       main{
           width:100%;
           height:864px;
       }
       .main_body{
           width:62.5%;
           height:776px;
           margin: 0px auto;
       }
       .main_body_left{
           margin-top:36px;
           width:24%;  /*288px*/
           float: left;
       }
       .main_body_left_top{
           width:100%;
           height: 114px;
           background: #ffffff;
           box-shadow: -3px 3px 3px #dadada;
           padding-top:25px;
       }
       .main_body_left_top h4{
           margin-left:20px;
           /* margin-top:25px; */
           font-size:24px;
           color:#57c7f6;
       }
       .main_body_left_top p{
            margin-left:20px;
            margin-top:9px;
            font:12px/19px 'simhei';
            width:87%;
            color: #b9b9b9;
       }
       .main_body_left_center{
           width:100%;
           height: 177px;
           background: #ffffff;
           box-shadow: -3px 3px 3px #dadada;
           margin-top: 1px;
           padding-top:20px;
       }
       .main_body_left_center .bgTopLeft{
           width:40px;
           height:40px;
           background: url("img/search.gif") 100% 100% no-repeat;
           float: left;
           margin-left:6.9%;
           
       }
       .main_body_left_center .bgTopRight p{
            font-size:15px;
            color:#9878ff;
       }
       .main_body_left_center .bgTopRight{
           width:62.5%;
           height:40px;
           float: left;
           font-size:11px;
           color:#a3a3a3;
           margin-left: 1%;
       }
       .main_body_left_center .botLi{
           margin-top:32px;
       }
       .main_body_left_center .bgBotLeft{
            background: url("img/dbman.gif") 100% 100% no-repeat;
       }
       .main_body_left_center .bgBotRight p{
           color:#6686ff;
       }
       .main_body_left_bottom{
           width:100%;
           height:356px;
           background: #ffffff;
           box-shadow: -3px 3px 3px #dadada;
           margin-top:20px;
       }
       .main_body_left_bottom p:nth-of-type(1){
           color:#333333;
           font-weight: bolder;
           font-size:19px;
           padding-top:15px;
           width:100%;
           height:19px ;
           text-align: center;
       }
       .main_body_left_bottom p:nth-of-type(2), .main_body_left_bottom p:nth-of-type(3){
           color:#333333;
           font-size:11px;
           margin-top:9px;
           width:100%;
           text-align: center;
           
       }
       .main_body_left_bottom h4:nth-of-type(1), .main_body_left_bottom h4:nth-of-type(2){
           width:88px;
           height:88px;
           background: url("img/code.png") 100% 100% no-repeat;
           margin:18px auto 0px;
       }
       .main_body_left_bottom p:nth-of-type(4), .main_body_left_bottom p:nth-of-type(5){
            color:#c4c4c4;
           font-size:11px;
           margin-top:7px;
           width:100%;
           text-align: center;
       }

       .main_content{
           height:730px;
       }
       .main_content .remind{
            height: 26px;
            font:12px/26px 'simhei';
            background:#dbf2fb;
            border-radius: 5px;
            margin-top: 36px;
            margin-left:5.5%;
            margin-bottom: 30px;
            text-align: center;
            color:#becbd0;
            width:446px;
        }
        .main_content span{
            color: #000000;
        }
        .main_content .patientName{
            height:60px;
            width:90%;
            font-size:18px;
            color:#999999;
            margin-left:5.5%;
        }
        .main_content .patientName .Name{
            width:198px;
        }
        .main_content .Aform{
            width:68%;
            height:36px;
            border:1px solid #999999;
            border-radius: 7px;
        }
        .main_content .problem{
            margin-top:26px;
        }
        .main_content .problem .problemLeft{
            float: left;
            width:60%;
        }
        .main_content .problem .problemRight{
            float: left;
            /* margin-left:5px; */
            font-size:12px;
            width:40%;
        }
        .main_content .problem .problemRight p:nth-of-type(1){
            color:red;
        }
        .main_content .YourNeed{
            height:100px;
        }
        .main_content .YourNeed textarea{
            vertical-align: top;
            border-radius:7px;
            width:68%;
        }
        .main_content .reminder{
            font-size: 11px;
            color:#999999;
            width:400px;
            margin-left:16%;
        }
        .demoHidden{
			display: none;
		}
		.radioInput{
			display: inline-block;
			width:18px;
			height:18px;
			border:1px solid #000000;
			border-radius:100%;
			margin-right:5px;
			vertical-align: middle;
		}
		.demoHidden:checked + .radioInput:after{
			content:"";
			display: inline-block;
			width:19px;
			height:19px;
			background:#000000;
			border-radius:100%;
		}
		.demoHidden:checked + .radioInput{
			border:1px solid #000000;
        }
        .Submit{
            width:360px;
            background:#57c7f6;
            height: 38px;
            margin-top: 40px;
            margin-left:16%;
            border:none;
            border-radius: 7px;
            font-size: 17px;
            color:#ffffff;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="header_up">
            <h2>YOUR LOGO</h2>
            <label class="header_up_lab"><span class="fa fa-search"></span><input type="text" placeholder="请输入科室名/医生名/疾病名" class="text" ></label>
            <input type="text" value="搜索" class="search">
            <p class="adm"><a href=""> <span class="fa fa-user"></span>&nbsp; / 管理员登录</a></p>
        </div>
    </header>
    <nav>
        <div class="nav_a">
            <a href="首页.html">首页</a>
            <a href="appointment.html">预约挂号</a>
            <a href="Onlinevisit.html" class="active">在线问诊</a>
            <a href="./personal/index.html">个人中心</a>
            <a href="healthinquiry.html">健康咨询</a>
            <a href="illnessinquiry.html">疾病专题</a>
        </div>
    </nav>
    <main class="main">
        <div class="main_top">
            <span>当前位置：首页 > </span>
            <strong>在线问诊</strong>
        </div>
            <!-- <div class="main_body"> -->
        <div class="main_body_left clear">
            <div class="main_body_left_top">
                <h4>在线问诊</h4>
                <p>帮助普通患者快速找到选定条件下可预约的专家(目前只支持部分医院)</p>
            </div>
            <div class="main_body_left_center">
                <ul>
                    <li class="clear">
                        <div class="bgTopLeft"></div>
                        <div class="bgTopRight">
                            <p>快速筛选</p>
                            <div>根据区域、医院快速筛选对应班次</div>
                        </div>
                    </li>
                    <li class="clear botLi">
                        <div class="bgTopLeft bgBotLeft"></div>
                        <div class="bgTopRight bgBotRight">
                            <p>快速筛选</p>
                            <div>根据区域、医院快速筛选对应班次</div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="main_body_left_bottom">
                <p>手机挂号10秒搞定！</p>
                <p>立即扫描下载微医APP或</p>
                <p>关注微信公众号,让看病变得更简单！</p>
                <h4></h4>
                <p>扫码下载手机APP</p>
                <h4></h4>
                <p>扫码关注微信公众号</p>
            </div>
        </div>
        <div class="main_content">
            <!-- <form> -->
                <div class="remind">温馨提醒：费用由医院自行设定,平台不收取任何额外费用</div>
                <div class="patientName">患者姓名：<input type="text" placeholder="请输入" class="Aform Name">患者性别：<label><input type="radio" value="男" name="sex" class="demoHidden" id="sex1"><strong class="radioInput"></strong><span>男</span></label> <label><input type="radio" value="女" name="sex" class="demoHidden" id="sex2"><strong class="radioInput"></strong><span>女</span></label></div>
                <div class="problem patientName clear">
                    <div class="problemLeft">问题描述：<input type="text" class="Aform" placeholder="请描述你的问题" id="problem"></div>
                    <div class="problemRight"><p>*必填</p><p>请填写疾病名称,2-20个字,如：糖尿病合并下肢动脉栓塞</p></div>
                </div>
                <div class="problem patientName clear">
                    <div class="problemLeft">主要症状：<input type="text" class="Aform" placeholder="请大致描述你的症状" id="symptom"></div>
                    <div class="problemRight"><p>*必填</p><p>例如：2018年12月分出现头痛,视线模糊</p></div>
                </div>
                <div class="problem patientName clear">
                    <div class="problemLeft">所用药物：<input type="text" class="Aform" placeholder="目前所用药物" id="medicine"></div>
                    <div class="problemRight"><p>*必填</p><p>目前所用项目名称,如果没有填无</p></div>
                </div>
                <div class="YourNeed patientName problem clear">
                    <div class="problemLeft"> 患者病情：<textarea name="" id="state" rows="6" placeholder="请输入"></textarea></div>
                    <div class="problemRight"><p>*必填</p><p>例如：高血压是否引起头痛、视线模糊？还有其他原因吗?医生说我高血压不好控制,是否还有别的好办法？能去找您就诊吗？</p></div>
                </div>
                <p class="reminder">温馨提示：您的个人信息及联系方式我们将保密,仅医患双方可见</p>
            <a href="###" id="submit"><input type="submit" name=""  value="完成并提交" class="Submit"></a>
            <!-- </form> -->
        </div>
        <!-- </div> -->
    </main>
    <footer>
        <div class="footer_up">
            <div class="footer_up_con">
               <div class="footer_up_con_fir">
                   <p class="footer_up_con_fir1">
                       <a href="">联系我们</a>
                       <span>Content us</span>
                   </p>
                   <p class="footer_up_con_fir2">关注</p>
                   <p class="footer_up_con_fir3">您身边的家庭医生</p>
               </div>
               <div class="footer_up_con_two">
                    <div class="footer_up_con_two_img">
                        <span><img src="img/weibo.png" alt=""></span>
                        <span><img src="img/weixin.png" alt=""></span>
                        <span><img src="img/qq.png" alt=""></span>
                    </div>
                    <div class="footer_up_con_two_adress">
                        <p>地址: 北京市朝阳区国贸写字楼B座</p>
                        <p>电话: 400612358</p>
                        <p>邮箱: infor@abgj.com</p>
                    </div>
                    <div class="footer_up_con_two_phone">
                       <p>邮编: 400160</p>
                       <p>手机: 138466066</p>
                    </div>
               </div>
              
        </div>
       </div>
       <div class="footer_end">
            <p>京公网安备11010125610012号京ICP证150277号京ICP备15002532号</p>
        </div>
       </footer>
</body>
<script>
    var oName=document.getElementsByClassName("Name")[0];
    var oproblem=document.getElementById("problem");
    var osymptom=document.getElementById("symptom");
    var omedicine=document.getElementById("medicine");
    var ostate=document.getElementById("state");
    var osubmit=document.getElementById("submit");
    var osex1=document.getElementById("sex1");
    var osex2=document.getElementById("sex2");
    osubmit.onclick=function(){
        if(oName.value==''){
            alert('请输入姓名')
        }else if(osex1.checked==false&&osex2.checked==false){
            alert("请选择性别")
        } else if(oproblem.value==''){
            alert('请输入问题')
        }else if(osymptom.value==''){
            alert('请输入症状')
        }else if(ostate.value==''){
            alert('请输入病情')
        }else if(omedicine.value==''){
            alert('请输入所用药物')
        }else{
            alert("提交成功")
            osubmit.href='';
        }
    }
</script>
</html>